<template>
<div>
	<div class="list-group">
		<div class="list-group-item">
			<button type="button" class="vue-btn  vue-btn-default block" @click="onShow1">默认</button>
			<button type="button" class="vue-btn  vue-btn-default block" @click="onShow2">顶部</button>
			<button type="button" class="vue-btn  vue-btn-default block" @click="onShow3">底部</button>
			<button type="button" class="vue-btn  vue-btn-default block" @click="onShow4">自动隐藏</button>
			<button type="button" class="vue-btn  vue-btn-default block" @click="onShow5">动画</button>
		</div>
	</div>
	<toast
	:visible.sync="visible1"
	:text="text"
	@click="hide"
	></toast>

	<toast
	:visible.sync="visible2"
	:text="text"
	:position="top"
	@click="hide"
	></toast>

	<toast
	:visible.sync="visible3"
	:text="text"
	position="bottom"
	@click="hide"
	></toast>

	<toast
	:visible.sync="visible4"
	:text="text"
	:auto-play="autoPlay"
	:delay="delay"	
	></toast>

	<toast
	:visible.sync="visible5"
	:text="text"
	transition="fadeUp"
	@click="hide"
	></toast>
</div>
</template>

<script>
import Toast from "components/toast/toast"

export default{
	data(){
		return{
			visible1:false,
			visible2:false,
			visible3:false,
			visible4:false,
			visible5:false,
			autoPlay:true,
			delay:1000,
			text:"这是个Toast"
		}
 	},
 	components:{
 		Toast
 	},
 	methods:{
 		hide(){
 			this.visible1=false;
 			this.visible2=false;
 			this.visible3=false;
 			this.visible5=false;
 		},
 		onShow1(){
 			this.visible1=true;
 		},
 		onShow2(){
 			this.visible2=true;
 		},
 		onShow3(){
 			this.visible3=true;
 		},
 		onShow5(){
 			this.visible5=true;
 		},
 		onShow4(){
 			this.visible4=true;
 		}
 	}
}
</script>